<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_index.selectCity }}</view>
				<view v-if="queryObj.area" @click="changeAction">{{ lang_common.done }}</view>
			</view>

			<scroll-view scroll-x style="height: 80rpx; width: 100vw">
				<view class="nowrap u-p-l-30 u-p-r-30">
					<view v-for="(item, index) in selectData" :key="index" style="display: inline-block;"
						:class="['u-m-r-20', `tag-item${ index === selectIndex ? '-active' : '' }`]" @click="selectIndex = index">
						{{ queryObj[item.key] && queryObj[item.key].title || lang_common[item.key + 'Tips'] }}
					</view>
				</view>

			</scroll-view>
		</view>

		<!-- 数据列表 -->
		<swiper style="height: calc(100vh - 200rpx - var(--status-bar-height));" :current="selectIndex"
			@change="selectIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in selectData" :key="index">
				<city-list ref="mescrollItem" :i="index" :index="selectIndex" :obj="queryObj" :list="selectData" @change="changeCity">
				</city-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import CityList from './components/city-list.vue'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			CityList
		},
		data() {
			return {
				event: null,

				selectList: [{
						label: '国家',
						key: 'country',
						tips: '请选择国家'
					},
					{
						label: '省份',
						key: 'province',
						tips: '请选择省份'
					},
					{
						label: '城市',
						key: 'city',
						tips: '请选择城市'
					},
					{
						label: '区域',
						key: 'area',
						tips: '请选择区域'
					},
				],
				queryObj: {},
				selectIndex: 0,
			}
		},
		computed: {
			selectData() {
				let list = this.selectList
				let result = []
				for (let i = 0; i < list.length; i++) {
					result = [...result, list[i]]
					if (!this.queryObj[list[i].key]) return result
				}
				return result
			}
		},
		onLoad() {
			// 获取全局事件
			this.event = this.getOpenerEventChannel();
			this.event.on('city-page', (e) => {
				console.log(e)
				this.queryObj = {...e}
			})
		},
		methods: {
			// 选中国际区
			changeAction() {
				this.event.emit('change', this.queryObj)
				this.jumpBack()
			},
			judgeObj(a, b) {
				let aProps = Object.getOwnPropertyNames(a);
				let bProps = Object.getOwnPropertyNames(b);
				if (aProps.length !== bProps.length) return false;
				for (let i = 0; i < aProps.length; i++) {
					let propName = aProps[i]

					let propA = a[propName]
					let propB = b[propName]
					if (!b.hasOwnProperty(propName) || ((propA instanceof Object) && !this.judgeObj(propA, propB)) || propA !== propB) {
						return false
					}
				}
				return true
			},
			// 选项发生改变后
			changeCity(item) {
				let index = this.selectIndex
				let list = this.selectList
				let key = list[index].key
				if (this.queryObj[key] && !this.judgeObj(this.queryObj[key], item)) {
					list.slice(index).map(_item => {
						delete this.queryObj[_item.key]
					})
				}
				this.$set(this.queryObj, key, item)
				if (index !== list.length - 1) {
					this.selectIndex++
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		&-box {
			padding: 20rpx 24rpx;
			border-radius: 10rpx;
			background-color: #F6F6F6;
		}
	}

	.sort-name {
		position: sticky;
		top: -2rpx;
		left: 0rpx;
		background-color: #f9f9f9;
	}

	.tag-item {
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #F3F4F6;
		border-radius: 8rpx;
		
		&-active {
			@extend .tag-item;
			color: #FFFFFF;
			background-color: #F94404;
		}
	}
</style>
